<template>
<div id="sketch"></div>
<!-- <TestRef/> -->
</template>
  
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from "three";
import * as kokomi from 'kokomi.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import TestRef from './TestRef.vue';
import Wind from "./wind"
import resourceList from "./resources"

onMounted( ()=> {
class Sketch extends kokomi.Base {

    mousePosition = ref( { x: 0.0, y: 0.0 } );
    previousMousePosition = ref( { x: 0.0, y: 0.0 } );
    wind: Wind;

    create() {

        /*
            ----- 相机角度四元数 ----- _Euler {isEuler: true, _x: -2.693253241342998, _y: 0.0011607790579691885, _z: 3.141034309026071, _order: 'XYZ'}
            ThreeDWind.vue:31 ----- 相机位置 ----- {x: '0.01', y: '3.95', z: '-8.21'}
            ThreeDWind.vue:37 ----- 相机角度 ----- {x: '-154.31', y: '0.07', z: '179.97'}
            ThreeDWind.vue:38 ----- 相机角度四元数 ----- _Euler {isEuler: true, _x: -2.6932532413429966, _y: 0.0011607790579771916, _z: 3.1410343090260673, _order: 'XYZ'}
        */
        
        // ------------------------- Camera -------------------------
        this.camera.position.copy( new THREE.Vector3( 0.01, 4, -8.21 ) );
        this.camera.quaternion.setFromEuler( new THREE.Euler( -2.69, 0.0, 3.14, 'XYZ' ) );
        this.camera.lookAt( new THREE.Vector3(0,0,0) );

        /* 相机控制 */
        /*
        const orbitControls = new kokomi.OrbitControls(this);
        const controls = orbitControls.controls;
        controls.addEventListener( 'change', ()=> {
            const euler = new THREE.Euler().setFromQuaternion( this.camera.quaternion );
            const eulerDegrees = {
                x: THREE.MathUtils.radToDeg( euler.x ).toFixed(2),
                y: THREE.MathUtils.radToDeg( euler.y ).toFixed(2),
                z: THREE.MathUtils.radToDeg( euler.z ).toFixed(2)
            };
            console.log('----- 相机位置 -----', {
                x: this.camera.position.x.toFixed(2),
                y: this.camera.position.y.toFixed(2),
                z: this.camera.position.z.toFixed(2)
            });

            console.log( '----- 相机角度 -----', eulerDegrees );
            console.log( '----- 相机角度四元数 -----', euler );
        } );
        */
        // ------------------------- Camera -------------------------
        

        // ------------------------- 环境光 -------------------------
        const ambientLight = new THREE.AmbientLight( 0xFFFFFF, /*intensity*/0.4 );
        this.scene.add( ambientLight );
        // ------------------------- 平行光 -------------------------
        const directLight = new THREE.DirectionalLight( 0xFFFFFF, /*intensity*/0.6 );
        directLight.position.copy( new THREE.Vector3( 1, 2, 3 ) );
        this.scene.add(  directLight );

        // ------------------------- 资源管理 -------------------------
        const assetsManager = new kokomi.AssetManager( this, resourceList );
        assetsManager.emitter.on( "ready", ()=>{
            let tempList = {
                "texture_mid": assetsManager.items.texture_mid,
                "texture_out": assetsManager.items.texture_out,
                "texture_head_tail": assetsManager.items.texture_head_tail,
                "texture_sides": assetsManager.items.texture_sides,
            };
            this.wind = new Wind( this, assetsManager.items.wind, tempList );
            this.wind.addExisting();
        } );

        // ------------------------- 鼠标控制 -------------------------
        const container = this.container;
        let isMouseDown = false;

        container.addEventListener( "mousedown", (event: MouseEvent) =>{
            isMouseDown = true;
            this.previousMousePosition.value = {
                x: event.clientX,
                y: event.clientY
            };
        } );

        container.addEventListener( 'mousemove', ( event:MouseEvent )=> {
            if ( !isMouseDown  ) return;

            this.mousePosition.value = {
                x: event.clientX,
                y: event.clientY
            };

            const deltaX = this.mousePosition.value.x - this.previousMousePosition.value.x;
            const deltaY = this.mousePosition.value.y - this.previousMousePosition.value.y;
            // console.log( 'deltaX:', deltaX, 'deltaY:', deltaY );
            this.wind.updateMovement( new THREE.Vector2( deltaX, deltaY ) );
        } );

        container.addEventListener( "mouseup", (event: MouseEvent) => {
            isMouseDown = false;
            this.previousMousePosition.value = {
                x: this.mousePosition.value.x,
                y: this.mousePosition.value.y
            };
        } );

    }
    }

    const createSketch = () => {
        const sketch = new Sketch();
        sketch.create();
        return sketch;
    };
    
    createSketch();
} );

</script>
  
<style scoped>
.sketch {
  width: 50%;
  height: 50%;
}
#sketch {
    cursor: move;
    user-select: none;
}
</style>